<template>
  <div>
      <div class="adminUpadteFood" v-loading="loading">
      <div class="adminUpdate-item">
          <div class="adminFood-name">美食 ID   </div>
          <div>
            <el-input
              v-model="input"
              :disabled="true">
            </el-input>
          </div>
      </div>

      <div class="adminUpdate-item">
          <div class="adminFood-name">美食名称   </div>
          <div>
            <el-input
              v-model="inputName"
              clearable>
            </el-input>
          </div>
      </div>

      <div class="adminUpdate-item">
          <div class="adminFood-name">美食类别   </div>
          <div>
            <el-select @change="changeValue" v-model="value" placeholder="请选择">
              <el-option
                v-for="item in values"
                :key="item.ftId"
                :label="item.ftName"
                :value="item.ftId">
              </el-option>
            </el-select>
          </div>
      </div>

      <div class="adminUpdate-item">
          <div class="adminFood-name">美食图片   </div>
          <div>
            <img @click="updateImg" :src="list" alt="">
          </div>
      </div>

      <div class="adminUpdate-item">
          <div class="adminFood-name">美食描述   </div>
          <div class="adminTextarea">
            <el-input
              type="textarea"
              :autosize="{ minRows: 6}"
              placeholder="请输入内容"
              v-model="input3"
              maxlength="300"
              show-word-limit
              >
          </el-input> 
          </div>
      </div>

      <div class="adminUpdate-item">
          <div class="adminFood-name">制作步骤   </div>
          <div class="adminTextarea">
            <!-- <el-input
              type="textarea"
              :autosize="{ minRows: 6}"
              placeholder="请输入内容"
              v-model="textarea"
              maxlength="300"
              show-word-limit
              >
          </el-input>  -->
          <quill-editor
            v-model="textarea"
            @change="onEditorChange($event)"
            @blur="onEditorBlur($event)"
            @focus="onEditorFocus($event)">
            </quill-editor>
          </div>
      </div>
      <div class="adminUpdate-item">
        <div class="adminWanCheng">
          <el-button @click="complete" type="primary">完成</el-button>
        </div>
      </div>
  </div>

  <div v-if="updateOut">
      <update-food-img v-on:childByOut="childByOut" v-on:childImg="childImg"></update-food-img>
  </div>
  </div>
</template>

<script>
import UpdateFoodImg from '../updateimg/UpdateFoodImg.vue'
import { request } from "../../network/request";

export default {
  components: { UpdateFoodImg },
    name:'UpdateFood',
    data() {
        return {
            updateOut:'',
            list:'',
            input:'',
            input2:'',
            input3:'',
            textarea:'',
            inputName:'',
            loading: true,
            imgs:'',
            values:'',
            value:'',
            nowValue:''
        }
    },
    created() {
       request({
            url: "/foot/queryAllFootByFId",
            params:{
                fId:this.$route.query.fId,
                }
            }).then((res) => {
                this.list = res.data.data.fimg
                this.input = res.data.data.fid
                this.inputName = res.data.data.fname
                this.value = res.data.data.ftName
                this.input3 = res.data.data.fcontent
                this.textarea = res.data.data.fmake
                this.nowValue = res.data.data.ftId
                this.loading= false
                console.log(res);
                })
                .catch((err) => {
                    console.log(err);
                });

        request({
            url: "/foot/queryFootType",
            }).then((res) => {
                 this.values = res.data.data
                 console.log(res,this.value);
                })
                .catch((err) => {
                    console.log(err);
                });
    },
    methods: {
        childByOut: function (childValue) {
            this.updateOut = childValue
            console.log(this.updateOut);
        },

        childImg: function (childValue) {
            this.list = childValue
            console.log(this.list);
        },
        updateImg() {
                this.updateOut = true;
        },
        complete(){
            request({
            url: "/foot/updateFootById",
            method:"post",
            params:{
                fContent:this.input3,
                fId:this.input,
                fImg:this.list,
                fMake:this.textarea,
                fName:this.inputName,
                ftId:this.nowValue,
                }
            }).then((res) => {
               this.$alert('修改成功', '提示', {
                confirmButtonText: '确定',
                callback: () => {
                  this.$router.push('/adminfood')
                }
              });
                console.log(res);
                })
                .catch((err) => {
                    console.log(err);
                });
      },
      onEditorChange(){   //值发生改变

            console.log(this.textarea);
        },
      onEditorBlur(){   //失去焦点时
        },
      onEditorFocus(){    //获取焦点

      },
      changeValue(event){
        console.log(event);
        this.nowValue = event
      }
    },
}
</script>

<style>

</style>